<template>
  <div class="table-layout">
    <div class="table-header" v-show="$slots.header">
      <slot name="header"></slot>
    </div>
    <div class="table-container">
      <slot name="table"></slot>
    </div>
    <div class="table-footer" v-if="!noPage">
      <el-pagination :total="total" :layout="layout" :current-page="page" :page-size="size" :page-sizes="[10, 20, 30]"
        @size-change="onSizeChange" @current-change="onPageChange">
        <template #total>总计</template>
      </el-pagination>
      <slot name="footer"></slot>
    </div>

    <slot name="dialog"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    page: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    noPage: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onSizeChange(val) {
      this.$emit('update:size', val);
      this.$emit('update:page', 1);
      this.$emit('table-change');
    },
    onPageChange(val) {
      this.$emit('update:page', val);
      this.$emit('table-change', true);
    },
  },
});
</script>

<style lang="scss" scoped>
.table-layout {
  height: 100%;
  display: flex;
  flex-direction: column;

  .table-header {
    margin-bottom: 16px;
  }

  .table-container {
    flex: 1;
    overflow: hidden;
  }

  .table-footer {
    margin-top: 16px;
    display: flex;
    padding: 0 16px;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}
</style>